<script setup>
import { ADD_API, DEL_API, GET_BY_ID_API, USER_PAGE_API } from '@/apis/usercrud'
import { showMsg } from '@/utils/showMsg'
import { onMounted, ref } from 'vue'

// fetch table
const total = ref(0)
const tableData = ref([])
const fetchTable = async () => {
  const res = await USER_PAGE_API(
    queryParams.value.pageNum,
    queryParams.value.pageSize,
    queryParams.value
  )
  tableData.value = res.data.result
  total.value = res.data.total
}

onMounted(() => fetchTable())

// query
const initQuery = { username: '' }
const queryParams = ref(initQuery)
const handleQuery = (o) => {
  fetchTable()
  if(o){
    showMsg('查询成功', 'success')
  }
}

const resetQuery = () => {
  queryParams.value.username = ''
  handleQuery()
  showMsg('重置成功', 'success')
}

// add
const addInfo = ref({})
const add_api = async data => await ADD_API(data || addInfo.value)
const resetAddInfo = () => (addInfo.value = {})

// dialog
const dialogVisible = ref(false)
const dialogFormRef = ref(null)
const dialogForm = ref({
  username: '',
  password: ''
})
const dialogRules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: '' }
  ],
}
const resetDialogForm = () => {
  dialogForm.value = {
    username: '',
    password: ''
  }
}
const showDialog = () => {
  dialogVisible.value = true
  resetDialogForm()
}
const hideDialog = () => {
  dialogVisible.value = false
  resetDialogForm()
}

const handleDialogSubmit = () => {
  dialogVisible.value = false
  add_api(dialogForm.value)
  resetDialogForm()
  showMsg('添加成功', 'success')
}

// del
const del_api = async (id) => await DEL_API(id)
const handleDelete = row => {
  del_api(row.id)
  fetchTable()
  showMsg('删除成功', 'success')
}

//edit 
const handleEdit = row => {
  dialogVisible.value = true
  GET_BY_ID_API(row.id).then(res => {
    console.log(res)
    dialogForm.value = res.data
  })
}
</script>
<template>
  <!-- search card -->
  <el-card>
    <span>用户账号</span>
    <el-input class="username-input" v-model="queryParams.username" clearable></el-input>
    <el-button type="primary" round class="search-btn" icon="Search" @click="handleQuery(1)">搜索</el-button>
    <el-button type="warning" round icon="Refresh" @click="resetQuery">重置</el-button>
    <el-button type="success" round icon="Plus" @click="showDialog">新增</el-button>
  </el-card>
  <!-- table card -->
  <el-card class="table-card">
    <span>用户列表</span>
    <el-table stripe :data="tableData">
      <el-table-column prop="id" label="id" width="80" />
      <el-table-column prop="username" label="账号" width="300" />
      <el-table-column prop="createTime" label="创建时间" width="200" />
      <el-table-column prop="updateTime" label="更新时间" width="200" />
      <el-table-column prop="operation" label="操作" width="200">
        <template #default="scope">
          <el-button @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- pagination -->
  <!-- <el-pagination background layout="prev, pager, next,jumper,total" :total="total" @current-change="handlePageChange" style="margin-top: 10px;"/> -->

  <!-- dialog -->
  <el-dialog align-center v-model="dialogVisible" width="500" ref="dialogFormRef">
    <el-form :model="dialogForm" :rules="dialogRules">
      <el-form-item prop="username">
        <User style="width: 20px;margin-top: 20px;" /><el-input placeholder="用户名" style="width: 60%;margin-top: 20px;" v-model="dialogForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <Check style="width: 20px;margin-top: 20px;" /><el-input placeholder="密码" style="width: 60%;margin-top: 20px;" v-model="dialogForm.password" type="password" show-password></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="hideDialog">取消</el-button>
        <el-button type="primary" @click="handleDialogSubmit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
.username-input {
  width: 240px;
  margin-left: 10px;
}
.search-btn {
  margin-left: 100px;
}
.table-card {
  margin-top: 20px;
}
.el-dialog {
  width: 500px;
}
</style>